<template>
  <div id="app" class="zh">
    <header-compontent></header-compontent>
    <div class="wrap">
      <keep-alive exclude='list'>
        <router-view></router-view>
      </keep-alive>
    </div>
    <router-link to="/">
      <div class="homeBtn">
        <div></div>
      </div>
    </router-link>
  </div>
</template>
<script>
  import headerCompontent from './components/header'
  export default {
    data () {
      return {
        cacheCom:"a,b,c"
      }
    },
    mounted(){
      this.getWH();
    },

    components: {
      headerCompontent
    },
    methods: {
      getWH:function(){
        // alert($(window).height());
        // alert($(window).width());
      }
    }
  }

</script>

<style>
  @font-face {
    font-family: DFPHeiW5-GB;
    src: url('../static/font/DFPHeiW5-GB.ttf')
  }

  @font-face {
    font-family: Trade Gothic Condensed;
    src: url('../static/font/DFPHeiW5-GB.ttf')
  }

  body {
    height: 18rem;
    overflow: hidden;
    /*background-image:url("../static/image/bg1.png"),url("../static/image/bg2.png");*/
    /*background-repeat: no-repeat, no-repeat;*/
    /*background-position: 0 0 25.51rem 0;*/
    /*background-size: 25.51rem 18rem; */
    /*background-color: rgba(0,0,0,0);*/
    /*background-color: rgba(0,0,0,0.2);*/
    /*color:red !important;*/
    background-color: black;
  }


  .zh {
    font-family: DFPHeiW5-GB;
  }

  .en {
    font-family: Trade Gothic Condensed;
  }

  #app {
    width: 32rem;
    height: 18rem;
    position: absolute;
    /*background-color: black;*/
    /*background: rgba(0,0,0,0.4);*/
    color: white;
    overflow: hidden;

  }
  .wrap {
    height: 15.65rem;
    margin: 1.2rem 1rem 0;
    position: relative;
  }

  .font54 {
    font-size: 0.54rem !important;
  }

  .font42 {
    font-size: 0.42rem !important;
  }

  .font30 {
    font-size: 0.3rem !important;
  }

  .font24 {
    font-size: 0.24rem !important;
  }

  .bg-white {
    background-color: #fff !important;
  }

  .bg-black {
    background-color: black !important;
  }

  .active {
    color: #FF126F !important;
  }

  .bg-active {
    background-color: #FF126F !important;
    border-color: #FF126F !important;
  }
  .clear{
    clear: both;
  }
  .fl-l {
    float: left;
  }

  .fl-r {
    float: right;
  }

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /*产品列表单个产品展示样式*/
  .media-box {
    width: 3.2rem;
    overflow: hidden;
    height: 5.2rem;
    position: relative;
  }

  .media-box img {
    width: 3.2rem;
    height: 3.2rem;
    display: block;
  }

  .media-box .title {
    height: 0.3rem;
    line-height: 0.3rem;
  }

  .media-box .title1 {
    margin: 0.28rem 0.05rem 0.14rem;
  }

  .media-box .title2 {
    margin: 0.14rem 0.05rem 0.27rem;
  }

  .media-box .box {
    width: 3.16rem;
    height: 0.68rem;
    border: 0.02rem solid #fff;
  }

  .media-box .price {
    line-height: 0.68rem;
    float: left;
    padding: 0 0 0 0.2rem;

  }

  .media-box .count {
    line-height: 0.68rem;
    float: right;
    padding: 0 0.2rem 0 0;
  }

  /*滚动条隐藏*/
  ::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /*回到首页*/
  .homeBtn {
    width: 1.8rem;
    height: 1.8rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.7);
    z-index: 10;
    overflow: hidden;
    cursor: pointer;
    position: fixed;
    right: 1.2rem;
    bottom: 1.5rem;
  }

  .homeBtn div {
    width: 0.92rem;
    height: 0.84rem;
    background: url("../static/image/home.png") no-repeat center center;
    background-size: 100% 100%;
    margin: 0.48rem auto;
  }
  /*热卖区域样式*/
   .rightArea{
    float: right;
    width: 3.2rem;
    margin-right: 0.08rem;
  }
  .nav{
    margin-left: -0.08rem;
  }
  .linelb1{
    height: 0.37rem;
    width: 3.16rem;
    margin: 0.25rem 0 0 0;
    border-left:0.04rem solid white;
    border-bottom:0.04rem solid white;
  }
  .goodsList {
    height:14.94rem;
    margin-top:0.63rem;
    overflow: scroll;
  }
  .media-box{
    margin-bottom: 1rem;
  }
</style>
